<template>
  <div class="json-schema-setting">
    <div class="flex-justify-center tab-box">
      <div class="tab-box-item" v-for="(item,index) in tabs" :key="index" @click="changeTabs(index)"
           :class="{'active':activeIndex === index}">
        {{item.label}}
      </div>
    </div>
    <!--数据类型-->
    <div v-show="activeIndex===0" class="data-box">
      <el-select
        v-model="schema.type" placeholder="请选择类型"
        size="mini" class="width-100 mar-btm-10"
        @change="(value) => changeAction(value, schema)">
        <el-option-group v-for="group in jsonType" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
      <el-row :gutter="10">
        <el-col :span="24" v-show="['string','number','integer'].includes(schema.type)">
          <!--枚举-->
          <div class="mar-btm-10">
            枚举
            <el-switch
              v-model="schema.isEnum"
              @change="openEnum"
              size="mini">
            </el-switch>
          </div>
          <div v-show="schema.isEnum">
            <el-row :gutter="10" class="mar-btm-5 border-bot">
              <el-col :span="8">枚举值</el-col>
              <el-col :span="6">名称</el-col>
              <el-col :span="6">说明</el-col>
              <el-col :span="4"></el-col>
            </el-row>
            <el-row v-for="(item,index) in schema.enum" :key="index" :gutter="10" class="mar-btm-5 border-bot">
              <el-col :span="8">
                <el-input v-model="item.value" size="mini" class="width-100 "></el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.name" size="mini" class="width-100 "></el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.description" size="mini" class="width-100 "></el-input>
              </el-col>
              <el-col :span="4">
                <el-button class="font-color-primary" size="mini" type="text" icon="el-icon-plus" @click="addEnum"/>
                <el-button class="font-color-danger" size="mini" type="text" icon="el-icon-delete"
                           @click="deleteEnum(index)"/>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" v-show="['string','number','integer'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">format</span>
            <el-select v-model="schema.format" size="mini" class="width-100">
              <el-option v-for="item in formatArr" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12" v-show="['string','number','integer','boolean'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">默认值</span>
            <el-input v-model="schema.default" size="mini" class="width-100 "></el-input>
          </div>
        </el-col>
        <el-col :span="12" v-show="['string'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">pattern</span>
            <el-input v-model="schema.pattern" size="mini" class="width-100 " placeholder="正则表达式"></el-input>
          </div>
        </el-col>
        <el-col :span="12" v-show="['string'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最小长度</span>
            <el-input-number v-model="schema.minLength" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['string'].includes(schema.type)">
          <div>
            <span class="data-title">最大长度</span>
            <el-input-number v-model="schema.maxLength" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['integer','number'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最小值</span>
            <el-input-number v-model="schema.minimum" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['integer','number'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最大值</span>
            <el-input-number v-model="schema.maximum" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['array'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最小元素个数</span>
            <el-input-number v-model="schema.minItems" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['array'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最大元素个数</span>
            <el-input-number v-model="schema.maxItems" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['object'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最小属性数量</span>
            <el-input-number v-model="schema.minProperties" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
        <el-col :span="12" v-show="['object'].includes(schema.type)">
          <div class="mar-btm-10">
            <span class="data-title">最大属性数量</span>
            <el-input-number v-model="schema.maxProperties" size="mini" class="width-100 " :min="0"
                             controls-position="right"></el-input-number>
          </div>
        </el-col>
      </el-row>
      <div>
      </div>
    </div>
    <!--JSON Schema-->
    <div v-show="activeIndex===1">
      <el-input type="textarea" v-model="jsonSchema" class="mar-top" :rows="10"></el-input>
      <!--      <CodeEditor v-model="jsonSchema" class="mar-top"></CodeEditor>-->
    </div>
  </div>
</template>
<script>
  import CodeEditor from "@/components/IDE/CodeEditor.vue";
  import {convertToSchema} from "@/utils"

  export default {
    name: "JsonSchemaSetting",
    components: {CodeEditor},
    data() {
      return {
        activeIndex: 0,
        tabs: [
          {label: '数据类型', value: 'data'},
          {label: 'JSON Schema', value: 'json'},
        ],
        jsonType: [
          {
            label: "引用",
            options: [
              {label: '引用模型', value: 'reaction'},
            ],
          },
          {
            label: "基础类型",
            options: [
              {label: 'String', value: 'string'},
              {label: 'Number', value: 'number'},
              {label: 'integer', value: 'integer'},
              {label: 'Boolean', value: 'boolean'},
              {label: 'Array', value: 'array'},
              {label: 'Object', value: 'object'},
              {label: 'null', value: 'null'}

            ],
          },
        ],
        formatArr: [
          {label: 'date-time', value: 'date-time'},
          {label: 'date', value: 'date'},
          {label: 'time', value: 'time'},
          {label: 'duration', value: 'duration'},
          {label: 'email', value: 'email'},
          {label: 'idn-email', value: 'idn-email'},
          {label: 'hostname', value: 'hostname'},
          {label: 'uuid', value: 'uuid'},
          {label: 'uri', value: 'uri'},
          {label: 'json-pointer', value: 'json-pointer'},
          {label: 'regex', value: 'regex'},
          {label: 'char', value: 'char'},
          {label: 'byte', value: 'byte'},
          {label: 'password', value: 'password'}
        ],
        jsonSchema: ''
      }
    },
    props: {
      schema: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      changeAction(value, schema) {

      },
      changeTabs(index) {
        this.activeIndex = index
        if (index === 1) {
          const schemas = convertToSchema(this.schema);
          console.log(5555, schemas)
          this.jsonSchema = JSON.stringify(schemas, null, 2)
          console.log(666, JSON.stringify(schemas, null, 2))
        }
      },
      openEnum(val) {
        if (val) {
          this.schema.enum = []
          this.schema.enum.push({
            name: '',
            value: '',
            description: ''

          })
        } else {
          this.schema.enum = []
        }
      },
      addEnum() {
        this.schema.enum.push({
          name: '',
          value: '',
          description: ''

        })
      },
      deleteEnum(index) {
        this.schema.enum.splice(index, 1)
      },
      formatJson(data) {
        return JSON.stringify(data, null, 2)
      }
    },

  }
</script>

<style scoped lang="less">
  .json-schema-setting {
    width: 100%;
    font-size: 12px;

    .tab-box {
      width: 320px;
      background: #F0F1F5;
      border-radius: 8px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      margin: 0 auto 10px;
      cursor: pointer;

      .tab-box-item {
        width: 50%;
        text-align: center;
      }

      .active {
        width: 50%;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #F0F1F5;
        box-sizing: border-box;

      }
    }

    .data-box {
      width: 100%;

      .data-title {
        display: inline-block;
        width: 80px;
      }

      .border-bot {
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
      }
    }
  }
</style>
